/*
 * @Author: hongbin
 * @Date: 2021-12-16 09:07:20
 * @LastEditors: hongbin
 * @LastEditTime: 2021-12-18 10:46:35
 * @Description:博客卡片
 */
import { View, Text } from "@tarojs/components";
import { navigateTo } from "@tarojs/taro";
import { styled } from "linaria/lib/react";
import React, { FC, ReactElement } from "react";
import { Blog } from "../../api/types";
import MarkDownParse from "../MarkDownParse";
import { AlignCenterBox } from "../View";
import Tag from "./Tag";

interface IProps {
  blog: Blog;
}

const BlogCard: FC<IProps> = ({ blog }): ReactElement => {
  return (
    <Container>
      <Title
        onClick={() => {
          navigateTo({
            url: `/pages/blog/index?id=${blog._id}`
          });
        }}
      >
        {blog.title}
      </Title>
      <MarkDownParse>{blog.introduce}</MarkDownParse>
      <AlignCenterBox>
        <Tag type="browse" count={blog.browseCount} />
        <Tag type="comment" count={blog.commentCount} />
        <Tag type="thumbsUp" count={blog.thumbsUp} />
      </AlignCenterBox>
    </Container>
  );
};

export default BlogCard;

export const Title = styled(Text)`
  color: #fffae5;
  font-weight: bold;
  letter-spacing: 1px;
`;

const Container = styled(View)`
  width: 90vw;
  background: #218bb3d9;
  border-radius: 1rem;
  margin: 1rem 5vw;
  overflow-x: scroll;
  color: #444;
  padding: 1rem;
  box-sizing: border-box;
`;
